<template>

  <div id="main">
    <van-nav-bar :title="`订单信息`"
                 :fixed=true
                 :border=false
                 @click-left="onClickLeft"
                 left-arrow
                 style="height:2.5rem;color: #FFFFFF" />

    <van-cell-group>
      <van-cell></van-cell>
      <van-cell></van-cell>
      <van-cell>
        <van-row type="flex" justify="center">
          <van-col>
            <van-image
                width="10rem"
                height="10rem"
                fit="contain"
                :src="movieInfo.picture"
            />
          </van-col>
        </van-row>
      </van-cell>
      <van-cell title="影院">
        {{cinemaInfo.cinemaName}}
      </van-cell>
      <van-cell title="电影名称">
        {{movieInfo.movieName}}
      </van-cell>
      <van-cell title="影厅">
        {{hallInfo.cinemaHallName}}
      </van-cell>
      <van-cell title="开始时间">
        {{movieShowInfo.showDateTime}}
      </van-cell>
      <van-cell title="座位">
        <span v-for="item in orderInfo.selectSeatInfo" :key="item.seatId">
          {{item.seatY}}排{{item.seatX}}座
        </span>
      </van-cell>
      <van-cell title="账户余额">
        {{accountInfo.balance}}
      </van-cell>
      <van-cell title="手机号码">
        {{userInfo.phone}}
      </van-cell>
    </van-cell-group>


    <van-goods-action>
      <div style="width: 50%">
        <span style="color: #e85151;margin-left: 10px">￥</span>
        <span style="color: #e85151;font-size: 25px">{{ orderInfo.totalPrice }}</span>
      </div>
      <van-goods-action-button
          type="danger"
          text="确认支付"
          @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import {addOrder} from "@/api/movie";
import {getJwtToken} from "@/lib/utils/TokenUtil";
import store from "@/store";
export default {
  name: "SubOrder",
  beforeRouteEnter (to,from,next) {
    if (getJwtToken() !== '') {
      let orderInfo = JSON.parse(sessionStorage.getItem("orderInfo"))
      let data =  {
        userInfo:store.state.user.info,
        orderInfo,
        cinemaInfo:JSON.parse(sessionStorage.getItem("cinemaInfo")),
        hallInfo:JSON.parse(sessionStorage.getItem("hallInfo")),
        movieInfo:JSON.parse(sessionStorage.getItem("movieInfo")),
        accountInfo:orderInfo.accountInfo,
        movieShowInfo:JSON.parse(sessionStorage.getItem("movieShowInfo")),
      }
      if (store.state.user.isGetInfo) {
        next(vm=>vm.setData(data))
      } else {
        store.dispatch('GetUserInfo').then((res) => {
          data.userInfo = res.data
          next(vm=>vm.setData(data))
        })
      }
    } else {
      to('/login')
    }
  },
  mounted() {

  },
  data(){
    return{
      userInfo:{},
      orderInfo:{},
      cinemaInfo:{},
      hallInfo:{},
      movieInfo:{},
      accountInfo:{},
      movieShowInfo:{},
      seatIds:[]
    }
  },
  methods: {
    setData(data){
      this.cinemaInfo=data.cinemaInfo;
      this.hallInfo=data.hallInfo;
      this.movieInfo=data.movieInfo;
      this.movieShowInfo=data.movieShowInfo;
      this.orderInfo = data.orderInfo;
      this.accountInfo = data.accountInfo;
      this.userInfo = data.userInfo;
      for (let item of data.orderInfo.selectSeatInfo){
        this.seatIds.push(item.seatId)
      }
    },
    onClickLeft () {
      this.$router.back();
    },
    onClickButton() {
      addOrder({
        accountId:this.accountInfo.accountId,
        movieShowId:this.movieShowInfo.movieShowId,
        hallId:this.hallInfo.cinemaHallId,
        seatIds:this.seatIds
      }).then(res=>{
        console.log(res)
        this.$router.push('/result')
      }).catch(err=>{
        console.log(err)
      })
    },
  },

}
</script>

<style scoped>
#main{
  background-color: #f5f5f5;
}
</style>
